<!-- 游客统计组件 -->
<template>
  <div class="tourist">
    <!-- 顶部信息部分 -->
    <div class="top">
      <div>实时游客统计</div>
      <div class="bg"></div>
      <div class="r_info">
        可预约总
        <span class="num">99999</span>
        人数
      </div>
    </div>
    <!-- 人数显示区域 -->
    <div class="center">
      <span class="item_num" v-for="(item, index) in totalNum" :key="index">{{
        item
      }}</span>
    </div>
    <!-- 水球图显示区域 -->
    <div class="botton">
      <!-- 显示水球图 -->
      <div ref="water_line" class="charts"></div>
    </div>
  </div>
</template>

<script setup>
//引入echarts
import * as echarts from "echarts";
//引入echarts的配置项
import { liquidfillOption } from "@/config/echarts/config";
//显示的总人数
let totalNum = ref("216908人");
//初始化水球图
let water_line = ref();
onMounted(() => {
  let myCharts = echarts.init(water_line.value);
  //配置数据主要是是liquidfillOption.series[0].data
  myCharts.setOption(liquidfillOption);
});
</script>

<style lang="scss" scoped>
.tourist {
  flex: 1.3;
  background: url(../images/dataScreen-main-lb.png) no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  .top {
    flex: 1;
    margin: 0 14px;
    margin-top: 10px;
    font-size: 16px;
    color: white;
    position: relative;
    .bg {
      width: 68px;
      margin-top: 10px;
      height: 7px;
      background: url(../images/dataScreen-title.png) no-repeat;
      background-size: 100% 100%;
    }

    .r_info {
      position: absolute;
      right: 0;
      bottom: 20px;

      .num {
        color: #f4930c;
      }
    }
  }
  .center {
    height: 40px;
    line-height: 40px;
    display: flex;
    color: #1ab1bc;

    .item_num {
      flex: 1;
      text-align: center;
      background: url(../images/total.png) no-repeat;
      background-size: 100% 100%;
      margin: 0 2px;
      font-size: 20px;
      font-weight: bold;
    }
  }
  .botton {
    flex: 3;

    .charts {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
